<template>
  <div class="n-bill">
    <head-area :name="name" />
    <div class="n-dlist">
      <!-- 飙升 -->
      <dl class="bt-t">
        <dt class="top">
          <div class="t-i">
            <img :src="topList[0] ? topList[0].coverImgUrl : ''" alt="" />
          </div>
          <div class="t-lbox">
            <a href="javascript:;" class="t-ltext">{{topList[0] ? topList[0].name : ''}}</a>
            <div class="t-t">
              <a href="javascript:;" class="bg" @click="addplaylist(soaringlist)"></a>
              <a href="javascript:;" class="bg1"></a>
            </div>
          </div>
        </dt>
        <dd class="cn" >
          <ol>
            <li class="cn-li" v-for="(soaringlist,index) in soaringlist" :key="soaringlist.id">
              <span> {{index+1}}</span>
              <a href="javascript:;" @click="gosong(soaringlist.id)" >{{soaringlist.name}}</a>
              <a href="javascript:;" class="bg" @click="playMusic(originalList.id,originalList.al.picUrl,originalList)" ></a>
              <a href="javascript:;" class="bg2"></a>
              <a href="javascript:;" class="bg1"></a>
            </li>
            <div class="bn-btn">
              <a href="javascript:;">查看更多></a>
            </div>
          </ol>
        </dd>
      </dl>
      <!-- 新歌 -->
      <dl class="bt-t">
        <dt class="top">
          <div class="t-i">
            <img :src="topList[0] ? topList[1].coverImgUrl : ''" alt="" />
          </div>
          <div class="t-lbox">
            <a href="javascript:;" class="t-ltext">{{topList[0] ? topList[1].name : ''}}</a>
            <div class="t-t">
              <a href="javascript:;" class="bg" @click="addplaylist(newSongList)"></a>
              <a href="javascript:;" class="bg1"></a>
            </div>
          </div>
        </dt>
        <dd class="cn">
          <ol>
            <li class="cn-li" v-for="(songList,index) in newSongList" :key="songList.id">
              <span> {{index+1}}</span>
              <a href="javascript:;" @click="gosong(songList.id)">{{songList.name}}</a>
              <a href="javascript:;" class="bg" @click="playMusic(songList.id,songList.al.picUrl)"></a>
              <a href="javascript:;" class="bg2"></a>
              <a href="javascript:;" class="bg1"></a>
            </li>
            <div class="bn-btn">
              <a href="javascript:;">查看更多></a>
            </div>
          </ol>
        </dd>
      </dl>
      <!-- 原创 -->
      <dl class="bt-t">
        <dt class="top">
          <div class="t-i">
            <img :src="topList[0] ? topList[2].coverImgUrl : ''" alt="" />
          </div>
          <div class="t-lbox">
            <a href="javascript:;" class="t-ltext">{{ topList[0] ? topList[2].name : '' }}</a>
            <div class="t-t">
              <a href="javascript:;" class="bg" @click="addplaylist(originalList)"></a>
              <a href="javascript:;" class="bg1"></a>
            </div>
          </div>
        </dt>
        <dd class="cn">
          <ol>
            <li class="cn-li" v-for="(originalList,index) in originalList" :key="index">
              <span> {{index+1}}</span>
              <a href="javascript:;" @click="gosong(originalList.id)">{{originalList.name}}</a>
              <a href="javascript:;" class="bg" @click="playMusic(originalList.id,originalList.al.picUrl)" ></a>
              <a href="javascript:;" class="bg2"></a>
              <a href="javascript:;" class="bg1"></a>
            </li>
            <div class="bn-btn">
              <a href="javascript:;">查看更多></a>
               <!-- <el-button type="primary">主要按钮</el-button> -->
            </div>
          </ol>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
// import { reqTopList } from "@/api";
export default {
  data() {
    return {
      name: "榜单",
      topList: [],
      // 三个榜单
      // 原创
      originalList: [],
      // 新歌
      newSongList: [],
      // 飙升
      soaringlist: [],
    };
  },
  mounted() {
    this.getTopList();
    // this.getPaylistDetail();
    this.getOriginalAll();
    // 新歌榜
    this.getNewSongAll();
    // 获取飙升榜
    this.getSoaringAll();
  },
  methods: {
    // reqTopList  获取榜单
    async getTopList() {
      const resule = await this.$API.reqTopList();
      if (resule.code == 200) {
        this.topList = resule.list || [];
      } else {
        alert("获取榜单失败");
      }
    },
    // // 获取榜单音乐详情reqPaylistDetail
    // async getPaylistDetail() {
    //   const resule = await this.$API.reqPaylistDetail(2884035);
    //   console.log(resule);

    //   if (resule.code == 200) {
    //     // this.topList = resule.list || [];
    //   } else {
    //     alert("获取榜单失败");
    //   }
    // },s

    // 获取飙升榜 新歌榜 原创榜单前十个信息

    //  原创榜
    async getOriginalAll() {
      /* 必选参数 : id : 歌单 id
      可选参数 : limit : 限制获取歌曲的数量，默认值为当前歌单的歌曲数量
      可选参数 : offset : 默认值为0
      接口地址 : /playlist/track/all
      调用例子 : /playlist/track/all?id=24381616&limit=10&offset=1
      */
      const params = {
        id: "2884035",
        limit: 10,
        offset: 0,
      };
      const resule = await this.$API.reqTrackAll(params);
      if (resule.code == 200) {
        this.originalList = resule.songs || [];
      } else {
        alert("获取榜单失败");
      }
    },
    // 新歌榜
    async getNewSongAll() {
      const params = {
        id: "3779629",
        limit: 10,
        offset: 0,
      };
      const resule = await this.$API.reqTrackAll(params);
      if (resule.code == 200) {
        this.newSongList = resule.songs || [];
      } else {
        alert("获取榜单失败");
      }
    },

       // 播放全部
    addplaylist(adds){
      // const playlist = localStorage.getItem('playlist')
      // console.log(playlist)
      // 修改值达到同步
      this.$store.commit('ADDTRACKALL',adds)
      localStorage.removeItem('playlist')
      localStorage.setItem('playlist',JSON.stringify(adds))
      this.$bus.$emit('changeOne')
    },
     // 传参到播放列表
    playMusic(ids, picUrl) {
      //  console.log(this)
      this.$store.dispatch("getDetailList", ids);
      const big = {
        ids,
        picUrl,
      };
      this.$bus.$emit("singid", big);
    },
    // 获取飙升榜
    async getSoaringAll() {
      const params = {
        id: "19723756",
        limit: 10,
        offset: 0,
      };
      const resule = await this.$API.reqTrackAll(params);
      if (resule.code == 200) {
        this.soaringlist = resule.songs || [];
      } else {
        alert("获取榜单失败");
      }
    },

    gosong(id) {
      // http://localhost:8080/#/song?ids=28267047
      // console.log(id)
      this.$router.replace(`/song?ids=${id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.n-bill {
  width: 687px;
  background-color: darkgray;
  margin: 0 auto;
  background-color: rgb(244, 244, 244);
  a {
    color: #000;
  }
  .n-dlist {
    width: 100%;
    display: flex;

    .bt-t {
      margin-top: 10px;
      width: 230px;
      border: 1px solid rgb(204, 204, 204);
      .top {
        display: flex;
        margin: 10px 10px;
        .t-i {
          img {
            width: 80px;
            height: 80px;
          }
        }
        .t-lbox {
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          .t-ltext {
            margin-top: 5px;
            font-size: 12px;
          }
          .t-t {
            margin-top: 10px;
            display: flex;

            .bg {
              background: url("~@/assets/image/index.png");
              background-position: -267px -205px;
              display: block;
              width: 22px;
              height: 22px;
              margin-right: 10px;
              text-indent: -9999px;
            }
            .bg1 {
              background: url("~@/assets/image/index.png");
              background-position: -300px -205px;
              display: block;
              width: 22px;
              height: 22px;
              margin-right: 10px;
              text-indent: -9999px;
            }
          }
        }
      }
      .cn {
        // width: ;
        // display: flex;
        .cn-li {
          //   margin-left: 25px;

          padding-left: 25px;
          line-height: 32px;
          display: flex;
          position: relative;

          span {
            display: inline-block;
            width: 30px;
            height: 30px;
            font-size: 16px;
          }
          a {
            display: inline-block;
            width: 100px;
            height: 30px;
            margin-left: 10px;
            overflow: hidden;
            white-space: nowrop;
            text-overflow: ellipsis;
            font-size: 12px;
          }
          .bg {
            background: url("~@/assets/image/index.png");
            background-position: -267px -205px;
            display: none;
            width: 22px;
            height: 22px;
            margin-right: 10px;
            text-indent: -9999px;
            position: absolute;
            right: 66px;
          }
          .bg2 {
            background: url("~@/assets/image/icon2.png");
            background-position: -46px -377px;
            display: none;

            width: 22px;
            height: 22px;
            margin-right: 10px;
            text-indent: -9999px;
            position: absolute;
            right: 39px;
          }
          .bg1 {
            background: url("~@/assets/image/index.png");
            background-position: -300px -205px;
            display: none;
            width: 22px;
            height: 22px;
            margin-right: 10px;
            text-indent: -9999px;
            position: absolute;
            right: 10px;
          }
        }
        .cn-li:hover {
          .bg {
            display: block;
          }
          .bg1 {
            display: block;
          }
          .bg2 {
            display: block;
          }
        }
        .cn-li:nth-child(2n + 1) {
          background-color: rgb(232, 232, 232);
        }
        .bn-btn {
          background-color: rgb(232, 232, 232);
          line-height: 32px;
          display: flex;
          justify-content: flex-end;
          padding-right: 30px;
          a {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
